<!-- 视图点位 -->

<template>
  <div :class="pointClass" :style="pointStyle" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
    <div :class="iconClass" :style="iconStyle" @click.stop="toEdit">
      <div class="flexCC" :style="`background: ${iconColor}`">{{ obj.deviceId }}</div>
    </div>

    <div class="Secure-MapView-point-panel">
      <div>{{ isInherit ? '继承的' : '' }}参照点 {{ obj.deviceId }}</div>
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import ViewPoint from '@admin/views/Secure/mixMap/MapView/ViewPoint'

// ============================== 导出组件 ============================== //

export default CORE.extend(ViewPoint, {
  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    ...ViewPoint.computed,

    /**
     * 是否为继承
     */
    isInherit() {
      return this.obj.mapParent === 1
    },

    /**
     * 图标样式
     */
    iconClass() {
      const name = 'Secure-MapView-point-icon'
      const disabledStr = this.isInherit ? ` ${name}-disabled` : ''
      return `${name}${disabledStr}`
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    ...ViewPoint.methods,

    /**
     * 点击修改
     */
    toEdit() {
      if (!this.isInherit) this.map_setOne(this.obj)
    },
  },
})
</script>
